<template>
	<a-modal :visible="visible" title="支付变更" :footer="null" :width="700" @cancel="onCancel">
		<h4 class="font-[600]">支付方式变更前</h4>
		<div>与客户进行线上电子签约，客户通过系统生成的二维码进行支付</div>

		<h4 class="mt-[30px] font-[600]">支付方式变更后</h4>
		<div>与客户进行线上电子签约，客户通过其他支付方式进行付款（如：对公/企微收款/付呗码等）</div>

		<a-form
			ref="formRef"
			:model="formData"
			name="basic"
			:label-col="{ span: 3 }"
			:wrapper-col="{ span: 19 }"
			autocomplete="off"
			class="mt-[30px]"
		>
			<a-form-item label="付款凭证" name="imgUrl" :rules="[{ required: true, message: '请上传付款凭证' }]">
				<xn-upload
					ref="voucherImgRef"
					:before-upload="beforeUpload"
					:uploadNumber="9"
					:multiple="true"
					accept="image/*,.pdf"
					@uploadDone="onUploadDone"
				/>
				<div class="mt-1 text-gray-500">请上传jpg/png/pdf文件，且不超过500kb</div>
			</a-form-item>
		</a-form>

		<!-- 通过驳回按钮 -->
		<div class="flex justify-center gap-6 pt-6">
			<a-button @click="visible = false">取消</a-button>
			<a-button type="primary" @click="submit">提交</a-button>
		</div>
	</a-modal>
</template>
<script setup>
	import { message, Upload } from 'ant-design-vue'
	import contractApi from '@/api/biz/bizContractApi'

	const emits = defineEmits(['finished'])

	const visible = ref(false)
	const contractId = ref('')

	const formData = reactive({
		imgUrl: []
	})

	const voucherImgRef = ref(null)

	const onOpen = (id) => {
		contractId.value = id
		Object.assign(formData, { imgUrl: [] })
		visible.value = true
	}

	const onCancel = () => {
		voucherImgRef.value.resetFileList([])
		visible.value = false
		emits('finished')
	}

	/**
	 * 资料上传
	 */
	const beforeUpload = (file) => {
		const isJpgOrPng =
			file.type === 'image/jpg' ||
			file.type === 'image/jpeg' ||
			file.type === 'image/png' ||
			file.type === 'application/pdf'
		if (!isJpgOrPng) {
			message.error('只能上传JPG/PNG/PDF格式的图片!')
		}
		const isLt10M = file.size / 1024 / 1024 < 10
		if (!isLt10M) {
			message.error('图片大小必须小于10MB!')
		}
		return (isJpgOrPng && isLt10M) || Upload.LIST_IGNORE
	}

	/**
	 * 上传付款凭证
	 */
	const onUploadDone = (result) => {
		formData.imgUrl = result.map((item) => item.url)
	}

	/**
	 * 通过
	 */
	const formRef = ref(null)
	const submit = () => {
		formRef.value
			.validate()
			.then(() => {
				const params = {
					id: contractId.value,
					voucherImg: formData.imgUrl.join(',')
				}
				contractApi.payChange(params).then(() => {
					onCancel()
				})
			})
			.catch((error) => {
				console.log('error', error)
			})
	}

	defineExpose({
		onOpen
	})
</script>
<style lang="less" scoped></style>
